<template>
  <div class="app-container">
    <!-- 查询框 -->
    <search-bar class="search">
      <template slot="peopleSearch">
        <el-form class="form">
          <el-row type="flex" justify="end">
            <el-form-item>
              <el-col>
                <div>设备编号:</div>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="26">
                <el-input v-model="value" class="input" clearable />
              </el-col>
            </el-form-item>
            <el-form-item>
              <template>
                <el-col class="InquireBtn" :push="3">
                  <el-button class="InquireBtn" @click="searchBtn">
                    <i class="el-icon-search" />查询</el-button>
                </el-col>
              </template>
            </el-form-item>
          </el-row>
        </el-form>
      </template>
    </search-bar>
    <!-- 表格表单 -->
    <el-card>
      <el-table
        :data="vmStatus"
        stripe
        style="width:100%; padding-top: 20px; "
        :header-cell-style="{color:'#333744',background:'rgb(243, 246, 251)'}"
      >
        <el-table-column prop="index" label="序号" />
        <el-table-column prop="innerCode" label="设备编号" />
        <el-table-column prop="type.name" label="设备型号" />
        <el-table-column prop="node.name" label="详细地址" />
        <el-table-column prop="vmStatus" label="运营状态" :formatter="newVmStatus" />
        <el-table-column prop="status" label="设备状态" width="200">
          <el-tag class="orange" prop="10001" label="离线">离线</el-tag>
          <el-tag prop="status.10002" label="货道">货道</el-tag>
          <el-tag prop="status.10003" label="传动轴">传动轴</el-tag>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button type="text" size="small" @click="showDialog(row.innerCode)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <span class="demonstration">共{{ total }}条记录</span>
        <span class="demonstration">第{{ pageConfig.pageIndex }}/页</span>
        <el-pagination
          :current-page="pageConfig.pageIndex"
          layout=" prev, pager, next"
          :total="total"
          :page-size="pageConfig.pageSize"
          @current-change="currentChange"
        />
      </el-row>
    </el-card>
    <addStatus
      :is-show-dialog="isShowDialog"
      :vmsku-collect-list="vmskuCollectList"
      :totalsale="totalsale"
      :supply-count="supplyCount"
      :repair-count="repairCount"
      :inner-code-list="innerCodeList"
    />
  </div>
</template>

<script>
import { getSearchVm } from '@/api/goods'
import addStatus from './componts/add-status.vue'
import { getSkuCollect, getSupplyCount, getrepairCount, getOrderAmount } from '@/api/vm'
import moment from 'moment'
export default {
  components: {
    addStatus
  },
  data() {
    return {
      vmStatus: [],
      pageConfig: {
        pageIndex: 1,
        pageSize: 10
      },
      total: 0,
      isShowDialog: false,
      value: '',
      searchList: {},
      startDate: '',
      startMonth: '',
      vmskuCollectList: [],
      sum: [],
      totalsale: 0,
      repairCount: 0,
      supplyCount: 0,
      innerCodeList: ''
    }
  },
  created() {
    this.getVmStatus()
  },
  methods: {
    async getVmStatus() {
      const res = await getSearchVm(this.pageConfig)
      this.vmStatus = res.data.currentPageRecords.map((item, index) => {
        return {
          ...item,
          index: (this.pageConfig.pageIndex - 1) * this.pageConfig.pageSize + index + 1 }
      })
      this.total = +res.data.totalCount
    },
    async currentChange(newPage) {
      this.pageConfig.pageIndex = newPage
      this.getVmStatus()
    },
    // 枚举 element table字段枚举需要转换，可以通过方法：单元格formatter(格式化器)函数
    newVmStatus(row, col, val) {
      return this.getSatus(row.vmStatus)
    },
    getSatus(vmStatus) {
      switch (vmStatus) {
        case 0:
          return '未投放'
        case 1:
          return '运营'
        case 2:
          return '撤机'
        default:
          return '已撤销'
      }
    },
    async searchBtn() {
      const obj = {
        pageIndex: 1,
        pageSize: 999,
        innerCode: this.value.trim()
      }
      const res = await getSearchVm(obj)
      this.searchList = res.data.currentPageRecords
      this.vmStatus = this.searchList
      this.vmStatus = res.data.currentPageRecords.map((item, index) => {
        return {
          ...item,
          index: (this.pageConfig.pageIndex - 1) * this.pageConfig.pageSize + index + 1 }
      })
      this.total = +res.data.totalCount
    },
    async showDialog(id) {
      // 调用获取时间
      this.getUserWorkTime()
      this.isShowDialog = true
      const res = await getSkuCollect(id, this.startMonth, this.startDate)
      const SupplyCount = await getSupplyCount(id, this.startMonth, this.startDate)
      this.supplyCount = SupplyCount.data
      const RepairCount = await getrepairCount(id, this.startMonth, this.startDate)
      this.repairCount = RepairCount.data

      // 获取销售金额(url加参数)
      const orderAmount = {
        start: this.startMonths,
        end: this.startDates,
        innerCode: id
      }
      const data = await getOrderAmount({ ...orderAmount })
      this.innerCodeList = data.data
      // console.log(data)
      // 获取本月的数据
      this.vmskuCollectList = res.data
      // 销量
      this.vmskuCollectList.map(item => {
        this.totalsale += item.count
      })
    },
    // 获取售货时间
    getUserWorkTime() {
      // 现在时间
      this.startDate = moment().format('YYYY-MM-DD')
      // 开始时间
      // this.startMonth = moment().month(moment().month()).startOf('month').format('YYYY-MM-DD')
      this.startMonth = moment(new Date('2020-01-01')).subtract('months').format('YYYY-MM-DD')
      // 销售总金额获取url接口的拼接时间
      this.startDates = moment().format('YYYY-MM-DD HH:mm:ss')
      this.startMonths = moment(new Date('2020-01-01')).subtract('months').format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style lang="scss" scoped >
.search{
    width: 100%;
.form{
padding-top: 10px;
.InquireBtn{
    color:#fff;
    border-radius: 4px;
    background-color: #5f84ff;
  }
}
}
.el-tag{
  text-align: center;
  border-radius: 20px;
    border: 1px solid;
    margin: 3px;
    background: #ff665f linear-gradient(135deg,#3fc997,#4bda98);
    color: #fff;
    font-size: 12px;
}
.orange{
    background: #ff665f linear-gradient(135deg,#ffb043,#ffc020);
}

.addBtn{
  color:#fff;
background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
}
.batchBtn{
      background-color: #fbf4f0!important;
      color: #655b56!important;
      border: none;
}
</style>
